import React from 'react'
import { BaseDetailPage, IBaseDetailPageProps, http, routeUtils, IUdDetailItem, UdDetail, IBaseDetailPageState } from '@/lib'
import DetailReviewProgress from '../../component/DetailReviewProgress'
import { Button, Card } from 'antd'
import TerminalTable from './terminalTable'
import apis from '@/apis/TodoList'
import { todoApproveModalOpen } from '../../component/ApproveModalHandle'
import { hasApproveQuotaAuth } from '../../common'

const ButtonGroup = Button.Group

export default class QuotaAdjustmentDetail extends BaseDetailPage<IQuotaAdjustmentDetailProps, IQuotaAdjustmentDetailState> {
  private taskId
  private businessKey
  private canReview
  private detailItems: IUdDetailItem[] = [
    {
      title: '组织机构',
      dataIndex: 'brandName',
      col: { span: 8 },
    },
  ]
  constructor(props) {
    super(props)
    const { taskId, businessKey, type, brandCode } = routeUtils.searchStringToObject(this.props.history.location.search, { taskId: '', type: '', brandCode: '', businessKey: '' })
    this.taskId = taskId
    this.businessKey = businessKey
    this.canReview = type == 1 // 待处理进入才可操作审批
    this.state = {
      title: '月度配额调整',
      queryAction: () => {
        return http.get(apis.quotaAdjustmentDetail, { params: {
          id: this.props.match.params.id,
          businessKey: businessKey,
          brandCode,
        } })
      },
      tableData: [],
    }
  }

  render() {
    const { dataSource, tableData } = this.state
    const processDetail = dataSource?.processDetailResult
    const brandName = tableData && tableData[0] ? tableData[0].brandName : ''
    const titleData = { brandName }
    return super.render({
      body: (
        <>
          <div className='ud-detail left-align-label'>
            <Card title='任务详情' size="small">
              <UdDetail items={this.detailItems} dataSource={titleData} />
              <TerminalTable dataSource={tableData} changeTableData={this.changeTableData} />
            </Card>
          </div>
          <DetailReviewProgress processDetail={processDetail} />
        </>
      ),
      footer: (
        <ButtonGroup>
          {(this.canReview && hasApproveQuotaAuth()) && <Button type="primary" onClick={this.reviewHandle}>审批</Button>}
        </ButtonGroup>
      )
    })
  }
  
  /** 发起查询 */
  public query = () => {
    this.setState({ querying: true });
    this.state.queryAction().then(res => {
      let data = this.handleDataSource(res)
      const tableData = data?.quotaModifyHistoryRespVoList
      this.setState({ dataSource: data, tableData })
    }).finally(() => {
      this.setState({ querying: false })
    })
  }

  public reviewHandle = () => {
    const { dataSource, tableData } = this.state
    const taskId = this.taskId
    const successSubmit = () => {
      this.props.history.goBack()
    }
    console.log(tableData)
    const data = { taskId, roles: dataSource.roles, tableData}
    todoApproveModalOpen({ data, successSubmit })
  }

  public changeTableData = (data) => {
    this.setState({
      tableData: data,
    })
  }

}

interface IQuotaAdjustmentDetailProps extends IBaseDetailPageProps<{
  id: string
}> {

}

interface IQuotaAdjustmentDetailState extends IBaseDetailPageState {
  tableData: any[]
}
